<template>
  <Layout>
    <div  v-loading="isLoading" ref="mainContainer" class="main-container">
      <BlogDetail :blog="record" v-if="record"/>
      <Comment/>
    </div>
    <template #right>
      <div  v-loading="isLoading" class="right-container">
        <BlogToc  v-if="toc" :toc="toc"/>
      </div>
    </template>
  </Layout>
</template>

<script>
import { getBlog } from '../../../api/'
import Layout from '../../../components/Layout'
import BlogDetail from '../components/BlogDetail'
import BlogToc from '../components/BlogToc'
import Comment from '../components/BlogComment'
import mainScroll from '../../../mixins/mainScroll'
import { setTitle } from '../../../utils'

export default {
  mixins: [mainScroll('mainContainer')],
  name: 'index',
  components: {
    Layout,
    BlogDetail,
    BlogToc,
    Comment
  },
  created () {
    this.fetchData()
  },
  data () {
    return {
      isLoading: false,
      record: null,
      toc: [],
      scrollTop: 0
    }
  },
  methods: {
    async fetchData () {
      this.record = await getBlog({
        id: this.$route.params.id
      })
      if (!this.record) {
        await this.$router.push('/404')
      }
      setTitle.setRouteTitle(this.record.title)
      this.toc = this.record.toc
      this.isLoading = true
    }
  },
  updated () {
    const hash = location.hash
    location.hash = ''
    setTimeout(() => {
      location.hash = hash
    }, 50)
  }
}
</script>

<style lang="less" scoped>
.main-container{
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  scroll-behavior: smooth;
  /*去掉滚动条*/
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  &{
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
}
.right-container{
  width: 300px;
  height: 100%;
  overflow-y: scroll;
  box-sizing: border-box;
  padding: 20px;
  position: relative;
  scroll-behavior: smooth;
  &::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  &{
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
